<template>
  <div class="container">
    <!-- nav start -->
    <div class="printer-wrap">
      <h1>{{$t('m.printservice.list')}}</h1>
      <template v-if="printerServiceList.length">
        <ul class="printer-list">
          <el-radio-group v-model="radio">
            <li v-for="(item, index) in printerServiceList" :key="index">
              <div>
                <el-radio :label="index">{{item.printername}}</el-radio>
              </div>
              <div>
                <i class="el-icon-setting" @click="editPrinter(item)" v-if="hasPermission('edit')"></i>
                <i
                  class="el-icon-remove-outline"
                  @click="removePrinter(item.printername)"
                  v-if="hasPermission('delete')"
                ></i>
              </div>
            </li>
          </el-radio-group>
        </ul>
      </template>
      <p class="tips" v-else>{{$t('m.nodata')}}</p>
      <div class="btn-wrap">
        <el-button
          v-if="hasPermission('add')"
          size="small"
          type="primary"
          @click="addPrinter"
          :disabled="!Boolean(printerList.length)"
        >{{$t('m.add')+$t('m.printservice.printer')}}</el-button>
      </div>
    </div>
    <!-- nav end -->

    <!-- printerService List start -->
    <div class="printer-service-wrap" v-if="printerServiceList.length">
      <el-card class="box-card">
        <div slot="header" class="header">{{currentPrinter.printername}}</div>
        <p class="alias">{{$t('m.printservice.alias')}}：{{currentPrinter.alias}}</p>
        <template v-if="currentPrinter.printserviceDtos.length">
          <div
            v-for="(item,index) in currentPrinter.printserviceDtos"
            :key="index"
          >{{item.printservicename}}</div>
        </template>
        <template v-else>{{$t('m.nodata')}}</template>
      </el-card>
    </div>
    <!-- printerService List end -->

    <!-- 添加or编辑打印机 start -->
    <printServicePopup
      v-if="printServicePopupVisible"
      :popupVisible="printServicePopupVisible"
      :detail="printServicePopupData"
      @save="handleSave"
      @close="printServicePopupVisible=false"
    ></printServicePopup>
    <!-- 添加or编辑打印机 end -->
  </div>
</template>
<script>
import printServicePopup from '@/components/printService/print-service-popup'
export default {
  name:'printerService',
  data(){
    return {
      radio:0,
      totalPrinterList:[], // 所有打印机列表
      printerList:[], // 剩余可添加的打印机列表
      serviceList:[], // 所有打印服务列表
      printerServiceList:[], // 打印机已添加服务的列表

      printServicePopupVisible:false,
      printServicePopupData:{},
      action:0
    }
  },
  mounted(){
    new Promise(resolve => {
      this.getData(resolve)
    }).then(() => {
      this.getPrinter()
      this.getService()
    })
  },
  computed:{
    currentPrinter(){
      return this.printerServiceList[this.radio] || { printerService:[] }
    }
  },
  components:{ printServicePopup },
  watch:{
    printerServiceList(){
      if (this.totalPrinterList.length){
        let list = [...this.totalPrinterList]
        this.getRestPrinter(list)
      }
    }
  },
  methods:{
    //获取当前已添加数据的打印机列表
    getData(resolve){
      let options = {
        method:'get',
        url:`printer/list`
      }
      this.$axios(options).then(({ data }) => {
        this.printerServiceList = data
        resolve && resolve()
      })
    },
    //获取所有打印机列表
    getPrinter(){
      let options = {
        method:'get',
        // 暂时写死ip
        url:`${window._config_.printerConfig}/getallprinternames`
      }
      this.$axios(options).then(({ data }) => {
        this.totalPrinterList = data
        let list = [...this.totalPrinterList]
        this.getRestPrinter(list)
      })
    },
    // 获取剩余可添加的打印机列表
    getRestPrinter(arr = []){
      for (let i = 0; i < this.printerServiceList.length; i++){
        for (let j = 0; j < arr.length; j++){
          if (this.printerServiceList[i].printername === arr[j]){
            arr.splice(j, 1)
            continue
          }
        }
      }
      this.printerList = arr
    },
    //获取所有打印服务列表
    getService(){
      let options = {
        method:'get',
        url:`printservice/getallprintservices`
      }
      this.$axios(options).then(({ data }) => {
        this.serviceList = data
      })
    },
    // 添加打印机
    addPrinter(){
      if (!this.serviceList.length)
        return this.callbackMessage(this.$t('m.printservice.noservice'))
      this.action = 0 // 0:新增 1:编辑
      this.printServicePopupData = {
        action:this.action,
        printerList:this.printerList,
        serviceList:this.serviceList
      }
      this.printServicePopupVisible = true
    },
    // 编辑打印机
    editPrinter(item){
      this.action = 1 // 0:新增 1:编辑
      let selectServiceList = item.printserviceDtos.map(__item => {
        return Number(__item.printserviceid)
      })
      this.printServicePopupData = {
        action:this.action,
        printerList:item.printername,
        alias:item.alias,
        serviceList:this.serviceList,
        selectServiceList
      }
      this.printServicePopupVisible = true
    },
    // 删除打印机
    removePrinter(name){
      this.$confirm(
        this.$t('m.printservice.delete'),
        this.$t('m.noticemessage'),
        {
          confirmButtonText:this.$t('m.confirm'),
          cancelButtonText:this.$t('m.cancel'),
          type:'warning'
        }
      )
        .then(() => {
          let options = {
            method:'delete',
            url:`printer/delete`,
            params:{ printername:name }
          }
          this.$axios(options).then(() => {
            this.callbackMessage(this.$t('m.deleteSuccess'), 'success')
            this.getData()
          })
        })
        .catch(() => {
          this.callbackMessage(this.$t('m.printservice.cancel'), 'info')
        })
    },
    // 保存popup info
    handleSave(form, list){
      let { printer:printername, alias } = form
      let options = {
        method:'post',
        url:`printer/handle`,
        data:{
          printername,
          alias,
          printserviceids:list,
          action:!this.action ? 'add' : 'edit'
        }
      }
      this.$axios(options).then(({ message }) => {
        this.printServicePopupVisible = false
        this.callbackMessage(message)
        this.getData()
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.printServicePopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  h1 {
    font-size: 18px;
    line-height: 3;
    background-color: #fff;
  }
  .printer-wrap {
    width: 400px;
    padding-bottom: 20px;
    margin-right: 20px;
    .tips {
      font-size: 14px;
      line-height: 3;
      border-top: 1px solid #e7e7e7;
      background-color: #fff;
    }
    .btn-wrap {
      background-color: #fff;
      padding: 20px 0;
    }
  }
  .printer-service-wrap {
    font-size: 14px;
    line-height: 2;
    text-align: left;
    flex: 1;
    .header {
      font-size: 18px;
      font-weight: bold;
    }
    .alias {
      font-size: 16px;
      color: #909399;
    }
  }
}
.printer-list {
  background-color: #fff;
  padding: 0 20px;
  .el-radio-group {
    width: 100%;
  }
  li {
    line-height: 3;
    font-size: 14px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  i {
    font-size: 20px;
    &:hover {
      color: #409eff;
      cursor: pointer;
    }
    &:last-child {
      color: #f56c6c;
      margin-left: 10px;
    }
  }
}
</style>